<template>
	<view style="background-color: #11CC99;">
		<!--里程-->
		<view style="text-align: center;background-color: #11CC99;padding-top: 50upx;" v-if="showMileageRecord">
			<view style="font-size: x-large;">{{totalMileage}}</view>
			<view>里程（km）</view>
		</view>
		<!--里程end-->
		<!--花费-->
		<view style="text-align: center;background-color: #11CC99;padding-top: 50upx;" v-if="!showMileageRecord">
			<view style="font-size: x-large;">{{totalSpend}}</view>
			<view>花费（元）</view>
		</view>
		<!--花费end-->
		<view class="vmodul">
			<view class="qiun-columns" >
				<view scroll-x class=" nav text-center" style="background-color: white;" >
					<view class="cu-item" style="width: 200upx;height: 80upx;border-radius: 20px;" :class="0==TabCur?'text-cyan cur':''" @tap="tabSelect" data-id="0">
						<text >里程记录</text>
					</view>
					<view class="cu-item"  style="width: 200upx;height: 80upx;border-radius: 20px;" :class="1==TabCur?'text-cyan cur':''" @tap="tabSelect" data-id="1">
						<text >花费信息</text>
					</view>
				</view>
				<view style="display: flex;justify-content:space-between;padding-right: 10px;">
					<view>
					</view>
					<Select>
						<option v-for="item in switchList" :vaule='item.value' v-model="switchValue">
							{{item.name}}
						</option>
					</Select>
				</view>
				<view class="qiun-charts" >
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				</view>
			</view>
        </view>	
		<view style="background-color: #F3F4FE;" v-if="showMileageRecord">
			<view class="cuIcon-titles">里程记录</view>
			<view class="vmodul">
				<view style="padding-left: 30upx;">{{mileageRecord.milRecord.recordDate}}</view>
				<view>
					<view class="cu-form-group"><view><view class="cuIcon-countdown">里程</view></view><view>{{mileageRecord.milRecord.mileage}}</view></view>
					<view class="cu-form-group"><view style="margin-left: 45upx;">花费</view><view>{{mileageRecord.milRecord.spend}}</view></view>
					<view class="cu-form-group"><view style="margin-left: 45upx;">其他</view><view>{{mileageRecord.milRecord.other}}</view></view>
				</view>
			</view>
			<view class="cuIcon-titles">车辆记录</view>
			<view >
				<view v-for="item in mileageRecord.cardRecord" class="vmodul" style="margin-top: 20upx;">
					<view style="padding-left: 30upx;">{{item.recordDate}}</view>
					<view>
						<view class="cu-form-group"><view>车牌号</view><view>{{item.licenseNumber}}</view></view>
						<view class="cu-form-group"><view>总时长</view><view>{{item.duration}}</view></view>
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #F3F4FE;" v-if="!showMileageRecord">
			<view class="vmodul">
				<view>
					{{spendRecord.recordDate}}
				</view>
				<view class="cu-form-group">
				  <view class="cu-form-group"><view class="cuIcon-moneybagfill">花费:</view></view><view>{{spendRecord.spend}}</view>
				</view>
				<view class="cu-form-group" style="padding-left: 85upx;"><view>地铁:</view><view>{{spendRecord.metro}}</view></view>
				<view class="cu-form-group" style="padding-left: 85upx;"><view>出租车:</view><view>{{spendRecord.taxi}}</view></view>
				<view class="cu-form-group" style="padding-left: 85upx;"><view>公交车:</view><view>{{spendRecord.bus}}</view></view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入uCharts 方法组件。
	import uCharts from '@/components/u-charts/u-charts.js';
	// 定义全局变量
	var _self;
	var canvaLineA=null;
	export default {
		data() {
			return {
				switchValue:0,
				totalMileage:'232424.53',
				totalSpend:'43242.50',
				TabCur: 0,
				scrollLeft: 0,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				switchList:[{value:0,name:'本月'},{alue:1,name:'本周'}],
				mileageData:[{
					name:"里程",
					data:[50,90,120,160,100,140,100],
					color:'#409eff'
				}],
				spendData:[{
					name:"花费",
					data:[200,100,120,80,50,70,200],
					color:'#409eff'
				}],
				categories:['08:00','10:00','12:00','14:00','16:00','18:00'],
				mileageRecord:{milRecord:{recordDate:'2018年12月',mileage:'28.453km',spend:'98.00元',other:'200.00元'},cardRecord:[{licenseNumber:'粤BXD523',duration:'12h30m',recordDate:'2018年12月'},{licenseNumber:'粤BXD524',duration:'11h30m',recordDate:'2018年12月'}]},
				spendRecord:{spend:'1780.00yuan',metro:'220.00yuan',taxi:'80.00yuan',bus:'350.00yuan',recordDate:'2018年12月'},
				showMileageRecord:true,
			}
		},
		// 页面加载执行的函数
		onLoad() {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				let LineA={categories:[],series:[]};
				if(this.TabCur==0){
					LineA.series=this.mileageData;
					this.showMileageRecord=true;
				}else if(this.TabCur==1){
					LineA.series=this.spendData;
					this.showMileageRecord=false;
				}
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				LineA.categories=this.categories;
				_self.showLineA("canvasLineA",LineA);
				
			},
			// 获取数据，发请求
			getServerData(){
				let LineA={categories:[],series:[]};
				LineA.categories=this.categories;
				LineA.series=this.mileageData;
				_self.showLineA("canvasLineA",LineA);
			},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize:11,
					legend:{show:false},
					dataLabel:false,
					dataPointShape:false,
					background:'#00C600',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					title: {
						name: "超标数据（小时）",
						fontSize: '10'
					}, 
					// x轴显示的内容
					xAxis: {
						disableGrid:true,
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:6,
					},
					// y轴显示的内容
					yAxis: {
						disableGrid:true,
						calibration:true,
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:4,
						min:0,
						max:200,
						format:(val)=>{return val.toFixed(1)}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'curve',
							width: '5'
						}
					}
				});
				
			},
			// 点击图表显示的内容
			touchLineA(e) {
				// 使用声明的变量canvaLineA
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
		}
	}
</script>

<style>
	.vmodul{
		display: flex;
		flex-direction:column;
		margin-left: 0rem;
		margin-right: 0rem;
		margin-top: 0rem;
		background-color: #FCFCFC;
		padding: 1rem 0px;
		border-radius:20px
	}
	.cuIcon-moneybagfill::before{
		padding-right: 10upx;
	}
	.cuIcon-countdown::before{
		padding-right: 20upx;
		color: #11CC99;
	}
</style>
